<template>
    <Modal
        v-model="toolModal.show"
        title="工具库"
        width="340"
        @ok="opTool(opType)"
        @on-cancel="hideModal()"
        :draggable="showInVm" 
        :sticky="showInVm"
        :scrollable="showInVm"
        :mask="showInVm ? false : true"
        :class-name="showInVm ? 'vm-tool-modal' : ''"
    >
        <div>
            <p>工具库状态：{{filterToolStatus()}}</p>
            <template v-if="toolDetail && toolDetail.status === 'running' && toolDetail.toolUrl">
                <p>工具库地址：{{toolDetail.toolUrl}}</p>
                <p>工具库账号：{{toolAcountInfo.name}}</p>
                <p>工具库密码：{{toolAcountInfo.password}}</p>
                <Divider style="margin:10px 0 "></Divider>
                <WarningTip type="show" :content="`工具库将于开启后${toolkitOpenTime}小时后关闭`">
                </WarningTip>
                <Divider style="margin:10px 0 "></Divider>
                <span style="position: relative;top: 2px;">关闭倒计时：<span style="font-size:18px;color:rgb(51, 115, 255);font-weight: 600;">{{curTime.h}}:{{curTime.m}}:{{curTime.s}}</span></span>
            </template>
        </div>
        <div slot="footer">
            <Button type="primary" @click="opTool('start')" :loading="loading.start" :disabled="toolDetail && toolDetail.status === 'running'">开启</Button>
            <Button type="primary" @click="opTool('stop')" :loading="loading.stop" :disabled="!toolDetail || toolDetail.status !== 'running'">关闭</Button>
        </div>
    </Modal>
</template>
<script>
import toolMixin from './toolMixin'
export default{
    name:'toolModal',
    props:{
        'prjId':{
            type:String,
            default:''
        },
        showCountdown:{
            type:Boolean,
            default:false
        },
        showInVm:{
            type:Boolean,
            default:false
        }
    },
    mixins:[toolMixin],
    data(){
        return {
            toolModal:{
                show:false,
                type:'',
                loading:false
            },
            currentSubnetId:'',
            leftTime:0,
            curTime:{h:'',m:'',s:''},
            timeout:'',
            interval:''
        }
    },
    computed:{
        time(){
            if(this.toolDetail && this.toolDetail.time){
                return this.toolDetail.time
            }else{
                return this.toolkitOpenTime * 60 * 60 * 1000 
            }
        }
    },
    watch:{
        time(val){
            this.leftTime = val;
            this.getTimes()
        }
    },
    mounted(){
        this.getDictInfoByName()
        this.getToolAccount()
    },
    beforeDestroy(){
        clearInterval(this.detailInterval);
        clearTimeout(this.timeout);
    },
    methods:{
        showModal(currentSubnetId){
            this.toolModal.show = true;
            this.currentSubnetId = currentSubnetId;
            this.getToolTunnelDetail();
            if(this.showCountdown){
                this.interval = setInterval(() => {
                    this.getToolTunnelDetail();
                },1000*60*10)
            }
        },
        hideModal(){
            this.toolModal.show = false;
            this.$emit('close')
        },
        getTimes(){
            clearTimeout(this.timeout);
            let leftTime = this.leftTime;
            // console.log(leftTime);
            if(leftTime > 0){
                let h = Math.floor(leftTime / 1000 / 60 / 60);
                let m = Math.floor(leftTime / 1000 / 60 % 60);
                let s = Math.floor(leftTime / 1000 % 60);
                this.curTime  = {
                    h:h < 10 ? '0'+h : h,
                    m:m < 10 ? '0'+m : m,
                    s:s < 10 ? '0'+s : s
                }
                this.timeout = setTimeout(() => {
                    this.leftTime = this.leftTime - 1000;
                    this.getTimes();
                },1000);
            }else{
                this.getToolTunnelDetail();
            }
        },
    }
}
</script>
<style scoped>

</style>
<style>
.vm-tool-modal .ivu-modal{
    /* width: auto!important; */
}
.vm-tool-modal .ivu-modal-content{
    /* left: calc(100vw - 340px);
    top: 0px; */
}
</style>
